<template>
    <div class="home">
        <!-- 快捷菜单 -->
        <el-row :gutter="20">
            <el-col :span="5" style="padding: 0">
                <div class="grid-content bg-purple Mtime" v-loading="loading">
                    <div class="MTBrig">
                        <div class="time">{{ nowTime }}</div>
                        <div class="WD">
                            <p class="week">{{ nowWeek }}</p>
                            <p class="Date">{{ nowDate }}</p>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <div class="grid-content bg-purple Cen_Box">
                        <div class="All_box">
                            <p class="line"></p>
                            <p class="All">常用功能</p>
                        </div>
                        <div class="common">
                            
                            <dl>
                                <dt>+</dt>
                                <dd>添加常用功能</dd>
                            </dl>
                        </div>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple top_Rig" v-loading="loading">
                    <div id="main1" style="width: 100%; height: 100%"></div>
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="5">
                <div class="grid-content bg-purple Text">
                    <p class="top">待办事项</p>
                    <ul v-for="(item, index) in data" :key="index">
                        <li>
                            <span :class="item.type == 1 ? 'on' : 'on2'"></span>
                            <span :class="item.type == 0 ? 'on2' : 'on'"></span>
                            <span>{{ item.name }}</span>
                        </li>
                    </ul>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple GRtable">
                    <p class="bot_top">xx表格</p>
                    <div>
                        <el-table :data="tableData" border style="width: 100%" height="300">
                            <el-table-column prop="date" label="日期" width="180"></el-table-column>
                            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                            <el-table-column prop="address" label="地址"></el-table-column>
                        </el-table>
                    </div>
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple" v-loading="loading">
                    <div id="main2" style="width: 100%; height: 450px"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
export default {
    name: 'dashboard',
    data() {
        return {
            loading: true,
            arr: [],
            nowDate: '', // 当前日期
            nowTime: '', // 当前时间
            nowWeek: '',
            data: [
                {
                    type: 1,
                    name: '中联混凝土项目报备与实施计划表'
                },
                {
                    type: 1,
                    name: '中联混凝土项目报备与实施计划表'
                },
                {
                    type: 1,
                    name: '中联混凝土项目报备与实施计划表'
                },
                {
                    type: 1,
                    name: '中联混凝土项目报备与实施计划表'
                },
                {
                    type: 1,
                    name: '中联混凝土项目报备与实施计划表'
                },
                {
                    type: 0,
                    name: '项目报备与实施计划表'
                },
                {
                    type: 0,
                    name: '项目报备与实施计划表'
                },
                {
                    type: 0,
                    name: '项目报备与实施计划表'
                },
                {
                    type: 0,
                    name: '项目报备与实施计划表'
                }
            ],
            tableData: [
                {
                    date: '2016-05-02',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-04',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-01',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-03',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-02',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-04',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-01',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-03',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-02',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-04',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-01',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-03',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-02',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-04',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-01',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-03',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-02',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-04',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-01',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-03',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-02',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-04',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-01',
                    name: '200,000',
                    address: '金额'
                },
                {
                    date: '2016-05-03',
                    name: '200,000',
                    address: '金额'
                }
            ]
        };
    },
    components: {},
    computed: {
        role() {
            return this.name === 'admin' ? '超级管理员' : '普通用户';
        }
    },
    created() {},

    methods: {
        common(item) {
            console.log(item);
        },
        echarts2() {
            let myChart = this.$echarts.init(document.getElementById('main2'));
            setTimeout(() => {
                myChart.setOption({
                    color: ['#3398DB'],
                    title: { text: this.nowDate },
                    tooltip: {},
                    xAxis: {
                        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
                    },
                    yAxis: {},
                    series: [
                        {
                            name: '销量',
                            type: 'bar',
                            data: [5, 20, 36, 10, 10, 20]
                        }
                    ]
                });
                this.loading = false;
            }, 1500);
        },
        echarts1() {
            const COLOR_WHITE = '#FFFFFF';
            // 定义rgba颜色
            const COLOR_BLUE_RGB_PRE = 'rgba(255, 182, 128,';
            const COLOR_PURPLE_RGB_PRE = 'rgba(158, 106, 245,';
            let myChart = this.$echarts.init(document.getElementById('main1'));
            setTimeout(() => {
                myChart.setOption({
                    backgroundColor: COLOR_WHITE,
                    legend: {
                        icon: 'rect',
                        itemWidth: 20,
                        itemHeight: 10,
                        orient: 'vertical',
                        itemGap: 13,
                        data: ['出库', '入库'],
                        top: '5%',
                        right: 20,
                        // backgroundColor: '',
                        textStyle: {
                            fontSize: 14,
                            color: '#919398'
                        }
                    },
                    grid: {
                        show: false,
                        left: '8%',
                        right: '8%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            // show:false,
                            type: 'category',
                            boundaryGap: false,
                            axisLine: {
                                show: false,
                                lineStyle: {
                                    color: '#57617B'
                                }
                            },
                            // 坐标轴刻度相关设置
                            axisTick: {
                                show: false
                            },
                            axisLabel: {
                                color: '#919398',
                                fontSize: 14,
                                fontFamily: 'Source Han Sans SC'
                            },
                            data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            offset: 30,
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: false
                            },
                            axisLabel: {
                                // margin: 10,
                                color: '#919398',
                                fontSize: 14,
                                fontFamily: 'Source Han Sans SC'
                            },

                            splitLine: {
                                show: false
                            }
                        }
                    ],
                    series: [
                        {
                            name: '出库',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 3,
                            showSymbol: false,

                            lineStyle: {
                                color: COLOR_BLUE_RGB_PRE + '0.8)',
                                normal: {
                                    width: 2
                                }
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: COLOR_BLUE_RGB_PRE + ' 0.3)' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: COLOR_BLUE_RGB_PRE + ' 0)' // 100% 处的颜色
                                        }
                                    ],
                                    global: false // 缺省为 false
                                },
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            },
                            itemStyle: {
                                color: COLOR_BLUE_RGB_PRE + ' 0.9)'
                            },
                            data: [300, 450, 250, 300, 450, 400, 350]
                        },
                        {
                            name: '入库',
                            type: 'line',
                            smooth: true,
                            symbol: 'circle',
                            symbolSize: 3,
                            showSymbol: false,

                            lineStyle: {
                                color: COLOR_PURPLE_RGB_PRE + ' 0.8)',
                                normal: {
                                    width: 2
                                }
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: COLOR_PURPLE_RGB_PRE + ' 0.3)' // 0% 处的颜色
                                        },
                                        {
                                            offset: 1,
                                            color: COLOR_PURPLE_RGB_PRE + ' 0)' // 100% 处的颜色
                                        }
                                    ],
                                    global: false // 缺省为 false
                                },
                                shadowColor: 'rgba(0, 0, 0, 0.1)',
                                shadowBlur: 10
                            },
                            itemStyle: {
                                color: COLOR_PURPLE_RGB_PRE + ' 1)'
                            },
                            data: [180, 350, 300, 390, 280, 400, 580]
                        }
                    ]
                });
            }, 1500);
        },

        //每秒运行下面的方法
        currentTime() {
            setInterval(this.getDate, 1000);
        },
        //时间方法
        getDate: function () {
            var _this = this;
            let yy = new Date().getFullYear();
            let mm = new Date().getMonth() + 1;
            let dd = new Date().getDate();
            let week = new Date().getDay();
            let hh = new Date().getHours();

            let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
            // let ms =
            // 	new Date().getSeconds() < 10 ?
            // 	"0" + new Date().getSeconds() :
            // 	new Date().getSeconds();

            if (week == 1) {
                this.nowWeek = '星期一';
            } else if (week == 2) {
                this.nowWeek = '星期二';
            } else if (week == 3) {
                this.nowWeek = '星期三';
            } else if (week == 4) {
                this.nowWeek = '星期四';
            } else if (week == 5) {
                this.nowWeek = '星期五';
            } else if (week == 6) {
                this.nowWeek = '星期六';
            } else {
                this.nowWeek = '星期日';
            }
            _this.nowTime = hh + ':' + mf;
            _this.nowDate = yy + '年' + mm + '月' + dd + '日';
            this.loading = false;
        }
    },
    mounted() {
        this.currentTime();
        this.echarts1();
        this.echarts2();
    }
};
</script>


<style lang="less" scoped>
.home {
    height: 100%;
}
.el-row {
    // margin-bottom: 20px;
    padding-left: 70px;
    box-sizing: border-box;
}
.el-col {
    margin-top: 15px;
    margin-left: 5px;
    padding: 0;
    background: #fff;
    border-radius: 1rem;
}
.el-col:hover {
    box-shadow: 3px 3px 5px #888888;
}

.Mtime {
    width: 100%;
    height: 300px;
    text-align: right;
    background: url('../../assets/images/ccccccc.png') no-repeat center;
    background-size: 100% 100%;
    padding: 1rem 0;
    box-sizing: border-box;
}
.MTBrig {
    margin-right: 2rem;
    margin-bottom: 2rem;
    color: #fff;
    .time {
        margin: 2rem 0;
        font-size: 3rem;
    }
    .WD {
        font-size: 1.8rem;
        line-height: 3rem;
    }
}

.Cen_Box {
    height: 290px;

    .All_box {
        width: 100%;
        display: flex;
        align-items: center;
        margin-top: 0.83rem;

        .line {
            width: 0.42rem;
            height: 1.67rem;
            background: rgba(52, 161, 255, 1);
            border-radius: 0.21rem;
            margin-left: 2.08rem;
        }

        .All {
            width: 6.5rem;
            font-size: 1.3rem;
            color: #5f5f5f;
            line-height: 1.04rem;
            margin-left: 0.83rem;
        }
    }

    .common {
        display: flex;
        flex-wrap: wrap;
        margin-top: 0.58rem;
        margin-left: 0.9375rem;

        dl {
            width: 6.7rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex-wrap: warp;

            dt {
                width: 2rem;
                height: 2rem;

                img {
                    width: 100%;
                    height: 100%;
                    display: block;
                    // border-radius: 1rem;
                }
            }

            dd {
                width: 5.25rem;
                height: 2rem;
                font-size: 1.2rem;
                font-weight: 400;
                color: rgba(95, 95, 95, 1);
                text-align: center;
                margin-top: 0.6rem;
                overflow: hidden; //溢出隐藏
                word-break: keep-all; //
                white-space: nowrap; //文本不折行
                text-overflow: ellipsis; //显示省略符号来代表被修剪的文本。
            }
        }
        dl:nth-last-child(1) {
            > dt {
                border: 2px dashed #ccc;
                cursor: pointer;
                display: flex;
                justify-content: center;
                line-height: 2rem;
                font-size: 3rem;
                color: #ccc;
            }
        }
    }
}
.top_Rig {
    height: 300px;
}
.Text {
    .top {
        margin: 1rem 0;
    }

    ul {
        width: 100%;
        li {
            line-height: 2.5rem;

            span:nth-child(1) {
                display: inline-block;
                margin-right: 1rem;
                width: 0.5rem;
                height: 0.5rem;
                border-radius: 50%;
            }

            .on {
                background: #926cff;
            }

            .on2 {
                background: #d4c7ef;
            }
        }
    }
    ul:nth-last-child(1) li {
        padding-bottom: 3rem;
    }
}
.GRtable {
    .bot_top {
        margin: 1rem;
    }
    > div {
        padding-bottom: 6.5rem;
        .el-table {
            border-radius: 1rem 1rem 0 0;
        }
    }
}
</style>
